<template>
    <el-form
        v-show="getShow"
        ref="formSmsLogin"
        :model="loginData.loginForm"
        :rules="rules"
        class="login-form"
        label-position="top"
        label-width="120px"
        size="large"
    >
        <el-row style="margin-right: -10px; margin-left: -10px">
            <!-- 租户名 -->
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item>
                    <LoginFormTitle style="width: 100%"/>
                </el-form-item>
            </el-col>
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
                    <el-input
                        v-model="loginData.loginForm.tenantName"
                        :placeholder="t('login.tenantNamePlaceholder')"
                        :prefix-icon="iconHouse"
                        type="primary"
                        link
                    />
                </el-form-item>
            </el-col>
            <!-- 手机号 -->
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item prop="mobileNumber">
                    <el-input
                        v-model="loginData.loginForm.mobileNumber"
                        :placeholder="t('login.mobileNumberPlaceholder')"
                        :prefix-icon="iconCellphone"
                    />
                </el-form-item>
            </el-col>
            <!-- 验证码 -->
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item prop="code">
                    <el-row :gutter="5" justify="space-between" style="width: 100%">
                        <el-col :span="24">
                            <el-input
                                v-model="loginData.loginForm.code"
                                :placeholder="t('login.codePlaceholder')"
                                :prefix-icon="iconCircleCheck"
                            >
                                <!-- <el-button class="w-[100%]"> -->
                                <template #append>
                  <span
                      v-if="mobileCodeTimer <= 0"
                      class="getMobileCode"
                      style="cursor: pointer"
                      @click="getSmsCode"
                  >
                    {{ t('login.getSmsCode') }}
                  </span>
                                    <span v-if="mobileCodeTimer > 0" class="getMobileCode" style="cursor: pointer">
                    {{ mobileCodeTimer }}秒后可重新获取
                  </span>
                                </template>
                            </el-input>
                            <!-- </el-button> -->
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-col>
            <!-- 登录按钮 / 返回按钮 -->
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item>
                    <XButton
                        :loading="loginLoading"
                        :title="t('login.login')"
                        class="w-[100%]"
                        type="primary"
                        @click="signIn()"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
                <el-form-item>
                    <XButton
                        :loading="loginLoading"
                        :title="t('login.backLogin')"
                        class="w-[100%]"
                        @click="handleBackLogin()"
                    />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script lang="ts" setup>
import type {RouteLocationNormalizedLoaded} from 'vue-router';

import {useIcon} from '@/hooks/web/useIcon';

import {setTenantId, setToken} from '@/utils/auth';
import {usePermissionStore} from '@/store/modules/usePermissionStore';
import {getTenantIdByName, sendSmsCode, smsLogin} from '@/api/login';
import LoginFormTitle from './LoginFormTitle.vue';
import {LoginStateEnum, useFormValid, useLoginState} from './useLogin';
import {ElLoading} from 'element-plus';

defineOptions({name: 'MobileForm'});

const {t} = useI18n();
const message = useMessage();
const permissionStore = usePermissionStore();
const {currentRoute, push} = useRouter();
const formSmsLogin = ref();
const loginLoading = ref(false);
const iconHouse = useIcon({icon: 'ep:house'});
const iconCellphone = useIcon({icon: 'ep:cellphone'});
const iconCircleCheck = useIcon({icon: 'ep:circle-check'});
const {validForm} = useFormValid(formSmsLogin);
const {handleBackLogin, getLoginState} = useLoginState();
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);

const rules = {
    tenantName: [required],
    mobileNumber: [required],
    code: [required],
};
const loginData = reactive({
    codeImg: '',
    tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
    token: '',
    loading: {
        signIn: false,
    },
    loginForm: {
        uuid: '',
        tenantName: '芋道源码',
        mobileNumber: '',
        code: '',
    },
});
const smsVO = reactive({
    smsCode: {
        mobile: '',
        scene: 21,
    },
    loginSms: {
        mobile: '',
        code: '',
    },
});
const mobileCodeTimer = ref(0);
const redirect = ref<string>('');
const getSmsCode = async () => {
    await getTenantId();
    smsVO.smsCode.mobile = loginData.loginForm.mobileNumber;
    await sendSmsCode(smsVO.smsCode).then(async () => {
        message.success(t('login.SmsSendMsg'));
        // 设置倒计时
        mobileCodeTimer.value = 60;
        let msgTimer = setInterval(() => {
            mobileCodeTimer.value = mobileCodeTimer.value - 1;
            if (mobileCodeTimer.value <= 0) {
                clearInterval(msgTimer);
            }
        }, 1000);
    });
};
watch(
    () => currentRoute.value,
    (route: RouteLocationNormalizedLoaded) => {
        redirect.value = route?.query?.redirect as string;
    },
    {
        immediate: true,
    },
);
// 获取租户 ID
const getTenantId = async () => {
    if (loginData.tenantEnable === 'true') {
        const res = await getTenantIdByName(loginData.loginForm.tenantName);
        setTenantId(res);
    }
};
// 登录
const signIn = async () => {
    await getTenantId();
    const data = await validForm();
    if (!data) return;
    ElLoading.service({
        lock: true,
        text: '正在加载系统中...',
        background: 'rgba(0, 0, 0, 0.7)',
    });
    loginLoading.value = true;
    smsVO.loginSms.mobile = loginData.loginForm.mobileNumber;
    smsVO.loginSms.code = loginData.loginForm.code;
    await smsLogin(smsVO.loginSms)
    .then(async (res) => {
        setToken(res);
        if (!redirect.value) {
            redirect.value = '/';
        }
        push({path: redirect.value || permissionStore.addRoutes[0].path});
    })
    .catch(() => {
    })
    .finally(() => {
        loginLoading.value = false;
        setTimeout(() => {
            const loadingInstance = ElLoading.service();
            loadingInstance.close();
        }, 400);
    });
};
</script>

<style lang="scss" scoped>
:deep(.anticon) {
    &:hover {
        color: var(--el-color-primary) !important;
    }
}

.smsbtn {
    margin-top: 33px;
}
</style>
